<!DOCTYPE HTML>
<html>
 <head>
  <title> New Document </title>
<style type="text/css">
	#divView {
	position:absolute;
	display:none;
	background-color:#ffffff;
	border:solid 2px #d0d0d0;
	width:350px;
	height:150px;
	padding:10px;
	}
	.divBox { border : 1px #999 solid; width:100px; height:30px; margin-bottom:10px; }
	.divBox1 { border : 1px #ccc solid;  background-color:#F2F2F2; width:100px; height:70px; display:none; }

</style>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <script type="text/javascript">
	function fnGetRestTime(target)
	{
		//var 
		
		var curTm = $("#"+target).text();
		var restTm = "";
		if (curTm && curTm != "END")
		{
			var restSec = getTotalSec(curTm);
			if (restSec > 0)
			{
				restTm = fnSec2Min(getTotalSec(curTm)-1);
			}
			else
			{
				restTm = "END";
				$("#"+target).css("border","1px #999 solid");
			}
			 $("#"+target).text(restTm);
			 $("#"+target+"1").text(restTm);
		}
		//alert(getTotalSec(curTm));
		if (curTm != "END")
		{
			setTimeout("fnGetRestTime('"+target+"')", 1000);
		}
		return;
	}

	fnGetRestTime("a");
	function fnSec2Min(tm)
	{
		var hr = 0;
		var min = 0;
		var sec = 0;
		var restSec = 0;
		hr = Math.floor(tm / (60 * 60));
		restSec = tm - (hr*60*60);
		min = Math.floor(restSec/60);
		sec = restSec - (min*60);
		if (hr==0) hr ="";
		else if (hr<10) hr = "0"+hr+":";
		else hr = hr+":";
		if (min<10) min = "0"+min+":";
		else min = min+":";
		if (sec<10) sec = "0"+sec;

		return hr+min+sec;

	}

	function getTotalSec(tm)
	{
		var divTm = tm.split(":");
		//alert(divTm.length);
		var totalSec = 0;
		if (divTm.length ==3)
		{
			totalSec = parseInt(divTm[0]) *60*60;
			totalSec += parseInt(divTm[1]) *60;
			totalSec += parseInt(divTm[2]);
		}
		if (divTm.length ==2)
		{
			totalSec = parseInt(divTm[0]) *60;
			totalSec += parseInt(divTm[1]) ;
		}
		if (divTm.length ==1)
		{
			totalSec = parseInt(divTm[0]);
		}
		return totalSec;
	}
  </script>
 </head>

 <body>
  <div>
	  <div id="a" class="divBox">12:05:23</div>
	  <div id="b" onclick="javascript:fnGetRestTime('b');" class="divBox">06:00</div>
	  <div id="c" onclick="javascript:fnGetRestTime('c');" class="divBox">45</div>
  </div>
  
	  <div id="a1" class="divBox1">12:05:23</div>
	  <div id="b1" onclick="javascript:fnGetRestTime('b');" class="divBox1">06:00</div>
	  <div id="c1" onclick="javascript:fnGetRestTime('c');" class="divBox1">45</div>
  
  
<div id="divView"></div>

<script type="text/javascript">
//-- 버튼 클릭시 버튼을 클릭한 위치 근처에 레이어 생성 --//
$('.divBox').mouseover(function(e) {
var divTop = e.clientY; //상단 좌표 위치 안맞을시 e.pageY
var divLeft = e.clientX; //좌측 좌표 위치 안맞을시 e.pageX
	//$('#divView').empty().append($(this).html());
	$("#"+$(this).attr("id")+"1").css({
		 "top": divTop
		 ,"left": divLeft
		 , "position": "absolute"
		 , "display" : ""
	}).show();
	$('#close').click(function(){document.getElementById('divView').style.display='none'});
});
$('.divBox').mouseout(function(e) {
	$("#"+$(this).attr("id")+"1").hide()
});

</script>
 </body>
</html>
